<include file="public@head_mobile" />


<style>
        .banner_box .swiper-pagination-bullet{
            margin:0 10px!important;
            overflow: hidden;
        }
        .banner_box .banner_img{
            width:100%;
        }
        .banner_box{
            width: 100%;
            overflow:hidden;
        }
        .cont_box{
            width: 100%;
            border-radius: 8px;
            background-color:#f8fafb;
            padding:10px 15px;
        }

        .title{
            font-size: 1.6rem;
            font-weight: 600;
            line-height: 1.6rem;
            margin:1rem 0;
            color: #000;
        }


        .list_box{
            width: 100%;
        }

        .info_box{
            width: 100%;
            display: flex;
            padding:10px 0;
            border-bottom: 1px dashed #dedede;
        }

        .info_box .F-tit{
            font-size: 1rem;
            line-height: 2rem;
            font-weight: 600;
            color: #3284c9;
            display: flex;
            justify-content: flex-end;
            width: 6.5rem;
            flex-shrink: 0;
            margin-right: 0.5rem;
            text-align: right;
        }
        .info_box .F-tit img{
            width: 1.5rem;
            height: 1.5rem;
            margin-top: 0.3125rem;
            margin-right: 8px;
        }

        .info_box .text_box{
            font-size: 1rem;
            line-height: 2rem;
            color: #626262;
            font-weight: 600;

        }
        .info_box .text_box span{
            margin-left: 0.8rem;
            font-weight: 500;
        }

        .form_box{
            width: 100%;
            display: flex;
            justify-content: flex-start;
        }

        .form_box .btn{
            width: 100px;;
            height: 50px;
            line-height: 50px;
            color: #fff;
            font-size: 1rem;
            background-color: #5ba1ed;
            text-align: center;
            padding:0;
            margin:0;
            border-radius: 0;
        }
        .form_box input{
            width: calc( 100% - 100px );
            border: 2px solid #5ba1ed;
            backdrop-filter: blur(21px);
            background: transparent;
            border-radius: 0;
            letter-spacing: 0.0833333px;
            color: #AAAAAA;
            font-size: 1rem;
            padding: 22px 30px 22px 25px;
            height: 50px;
            display: block;;
        }

        .title{
            font-size: 1.6rem;
            font-weight: 600;
            line-height: 1.6rem;
            margin:1rem 0;
            color: #000;
        }

        @media (max-width: 767.98px) {
            .blog-details-area {
                padding: 0px 0 50px;
                overflow: hidden;
            }

            .banner-bg {
                padding: 52px 0 15px;
            }
        }


    </style>
</head>
<body>

<!--loading-->
<div id="preloader">
    <div id="loader" class="loader">
        <div class="loader-container">
            <div class="loader-icon">
                <img src="__TMPL__/public/static/picture/preloader.png" alt="Preloader" />
            </div>
        </div>
    </div>
</div>
<!--loading -->

<!-- 鼠标特效 -->

<!-- 鼠标特效 -->

<!-- 返回顶部 -->
<button class="scroll-top scroll-to-target" data-target="html">
    <i class="fas fa-angle-up"></i>
</button>
<!-- 返回顶部-->
<include file="public@nav_mobile" />
<!-- 头部-->

<!-- main-area -->
<main>

    <!-- banner -->
    <section class="banner-area banner-bg">
        <div class="banner_box">
            <div class="swiper-wrapper">
                <foreach name="slide_list" item="vo">
                    <div class="swiper-slide"><img class="banner_img" src="{:cmf_get_image_url($vo.image)}" alt="" /></div>
                </foreach>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </section>

    <!-- blog-details-area -->
    <section class="blog-details-area pt-10 pb-10">
        <div class="container">
            <div class="row justify-content-center">

                <div class="title">常见问答</div>
                <div class="cont_box">


                    <div class="list_box">
                        <!-- 循环开始 -->
                        <foreach name="list" item="vo">
                            <div class="info_box">
                                <div class="F-tit"><img src="__TMPL__/public/static/image/people.png"/>{$vo.TeacherName.user_name}:</div>
                                <div class="text_box">{$vo.answer}<span> [{:date('Y-m-d',$vo.create_time)}]</span></span></div>
                            </div>

                            <div class="info_box">
                                <div class="F-tit"><img src="__TMPL__/public/static/image/da_icon.png"/>{$vo.TeacherName.teacher_name}</div>
                                <div class="text_box">{$vo.description}<span> </span></span></div>
                            </div>



                        </foreach>


                        <!-- 循环结束 -->
                    </div>

                    <div class="form_box">
                        <button type="button" class="btn" id="btn1">提问</button>
                        <input type="text" class="form-control" id="recipient-name" />
                    </div>


                </div>


            </div>
        </div>
    </section>
    <!-- blog-details-area-end -->



</main>
<!-- main-area-end -->





<!-- 底部导航 -->
<div class="footer_box">

    <div class="foot_item active">
        <a href="/">
            <!-- <img src="__TMPL__/public/static/image/foot_icon1.png" /> -->
            <img src="__TMPL__/public/static/image/foot_icon1_active.png" />
            <h3>  {:lang('HOME')}</h3>
        </a>
    </div>
    <div class="foot_item">
        <a href="/portal/agency/agency.html">
            <img src="__TMPL__/public/static/image/foot_icon2.png" />
            <!-- <img src="__TMPL__/public/static/image/foot_icon1_active.png" /> -->
            <h3>{:lang('Agency Center')}</h3>
        </a>
    </div>
    <div class="foot_item">
        <a href="/{$site_info.site_center|default=''}">
            <img src="__TMPL__/public/static/image/foot_icon3.png" />
            <!-- <img src="__TMPL__/public/static/image/foot_icon1_active.png" /> -->
            <h3>{:lang('CONTACT US')}</h3>
        </a>
    </div>

</div>
<!-- 底部导航 -->

<!-- JS here -->
<include file="public@script_mobile" />

<script>
    //轮播图
    var mySwiper = new Swiper(".banner_box", {
        direction: "horizontal", // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
    });

</script>
</body>
</html>
